<!DOCTYPE html> 
<html lang="ja"> 
    <head> 
        <meta charset="utf-8"> 
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Mouse Test | TM Lib</title>
        
        <style>
            body { font-family: "Meiryo", "メイリオ", "ヒラギノ角ゴ Pro W3", sans-serif; }
            
            #content {
                display: -webkit-box;
                display: -moz-box;
                display: -o-box;
                display: box;
            }

            
            #content>* {
                padding: 10px 20px;
                width: 50%;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                -o-box-sizing: border-box;
                box-sizing: border-box;
            }
            
            table {
                width: 100%;
            }
            th {
                width: 100px;
            }
            td {
                width: 200px;
            }
            
            td[html="true"] {
                color:red;
            }
            
            
        </style>
        
        <script type="text/javascript" src="./../../src/tmlib.js"></script>
        <script id="test-script">
            
            TM.loadScript("input", "mouse");
            
            /*
             * Test
             */
            TM.main(function()
            {
                // keyboard 生成
                var m = TM.$Mouse(document);
                
                var positionValueList = TM.$classAll("position-value");
                
                
                var mouseValueList = TM.$classAll("button-value");
                var mouseDownValueList = TM.$classAll("button-down-value");
                var mouseUpValueList = TM.$classAll("button-up-value");
                
                TM.setLoop(function(){
                    // mouse 情報更新
                    m.update();
                    
                    // 位置情報を表示
                    for (var i=0,len=positionValueList.length;i<len; ++i) {
                        var propName = positionValueList[i].getAttribute("data");
                        positionValueList[i].innerHTML = m[propName];
                    }
                    
                    
                    for (var i=0,len=mouseValueList.length;i<len; ++i) {
                        var buttonName = mouseValueList[i].getAttribute("data");
                        mouseValueList[i].innerHTML = m.getButton(buttonName);
                    }
                    
                    for (var i=0,len=mouseDownValueList.length;i<len; ++i) {
                        var buttonName = mouseDownValueList[i].getAttribute("data");
                        mouseDownValueList[i].innerHTML = m.getButtonDown(buttonName);
                    }
                    
                    for (var i=0,len=mouseUpValueList.length;i<len; ++i) {
                        var buttonName = mouseUpValueList[i].getAttribute("data");
                        mouseUpValueList[i].innerHTML = m.getButtonUp(buttonName);
                    }
                    
                }, 1000/30);
            });
            
        </script>
        
        <script>
            TM.addNamespace("prettify", "./../../plugins/prettify");
            TM.loadPrettify();
            
            TM.main(function(){
                TM.$id("code").innerText = TM.$id("test-script").innerText;
                prettyPrint();
            });
        </script>
    </head>
    
    <body>
         
        <h1>Mouse Test | TM Lib</h1>
        
        <div id="content">
            <section>
                <h2>Plot</h2>
                
                <h3>position</h3>
                <table border=1>
                    <tr>
                        <th>Name</th>
                        <th>Value</th>
                    </tr>
                    <tr>
                        <th>x</th>
                        <td class="position-value" data="x"></td>
                    </tr>
                    <tr>
                        <th>y</th>
                        <td class="position-value" data="y"></td>
                    </tr>
                    <tr>
                        <th>pX</th>
                        <td class="position-value" data="pX"></td>
                    </tr>
                    <tr>
                        <th>pY</th>
                        <td class="position-value" data="pY"></td>
                    </tr>
                    <tr>
                        <th>dX</th>
                        <td class="position-value" data="dX"></td>
                    </tr>
                    <tr>
                        <th>dY</th>
                        <td class="position-value" data="dY"></td>
                    </tr>
                </table>
                
                <h3>button</h3>
                <table border=1>
                    <tr>
                        <th></th>
                        <th>button</th>
                        <th>button down</th>
                        <th>button up</th>
                    </tr>
                    <tr>
                        <th>left</th>
                        <td class="button-value" data="left"></td>
                        <td class="button-down-value" data="left"></td>
                        <td class="button-up-value" data="left"></td>
                    </tr>
                    <tr>
                        <th>middle</th>
                        <td class="button-value" data="middle"></td>
                        <td class="button-down-value" data="middle"></td>
                        <td class="button-up-value" data="middle"></td>
                    </tr>
                    <tr>
                        <th>right</th>
                        <td class="button-value" data="right"></td>
                        <td class="button-down-value" data="right"></td>
                        <td class="button-up-value" data="right"></td>
                    </tr>
                </table>
            </section>
            <section>
                <h2>Code</h2>
                <pre id="code" class="prettyprint"></pre>
            </section>
        </div>
        
        
    </body>
</html>
